<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        #register {
            width: 400px;
            margin: 150px auto;
        }

        #alert_info {
            margin: 2px;
            padding: 2px;
            text-align: center;
            margin-bottom: 10px;
            display: none
        }

        .panel-heading {
            text-align: center;
        }

        h1 {
            position: relative;
            left: 38%;
            top: 100px;
        }

        #mask {
            position: fixed;
            background-color: rgba(0, 0, 0, 0.5);
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
        }

        .del {
            width: 300px;
            height: 150px;
            background-color: white;
            border: 1px solid #c8c8c8;
            position: fixed;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            display: none;
            border-radius: 15px;
            box-sizing: border-box;
        }

        .del h4 {
            width: 270px;
            text-align: center;
            margin: 15px;
        }

        .del div {
            margin-top: 40px;
            margin-left: 45px;
        }

        .del div button {
            margin: 10px
        }

        body {
            background: url(timg.jpg);
            overflow-x: hidden;
        }
    </style>
</head>

<body>
    <div class='container'>
        <h1>学生信息管理系统</h1>
        <div class='panel panel-primary' id='register'>
            <div class='panel-heading'>
                注册
            </div>
            <div class='panel-body'>
                <div class='form-group'>
                    <label for="username">用户名：</label>
                    <input type="text" name='username' class='form-control' id="username">
                </div>
                <div class='form-group'>
                    <label for="password">密码：</label>
                    <input type="password" name='password' class='form-control' id="password">
                </div>
                <div id='alert_info' class='alert alert-danger'>xxxxx</div>
                <a href="login.html">马上登录</a>
                <button id='btn1' class='btn btn-primary pull-right'>注册</button>
            </div>
        </div>
    </div>
    <div class="del">
        <h4>您已成功注册学生信息管理系统,请选取您的下一步操作!</h4>
        <div>
            <button class="btn btn-default" id="canDe">取消登录</button>
            <button class="btn btn-primary" id="sendDe">确认登录</button>
        </div>
    </div>
    <div id="mask"></div>
    <script src="jquery.min.js"></script>
    <script>
        $("#username").click(function () {
            $("#username").val("")
        })
        $("#password").click(function () {
            $("#password").val("")
        })
        $("#btn1").click(function () {
            $.ajax({
                //发送请求的方式
                url: "http://127.0.0.1/reg",
                data: {
                    username: $("#username").val(),
                    password: $("#password").val()
                },
                success(data) {
                    console.log(data);
                    if (data === "success") {
                        $("#mask").fadeIn();
                        $(".del").fadeIn();
                        $("#sendDe").click(function () {
                            location.href = "http://127.0.0.1/login.html"
                        })
                    } else {
                        if (data === "该用户名已注册") {
                            alert("该用户已注册")
                            history.go(0)
                        } else {
                            alert("注册失败")
                        }
                    }
                }
            })
        })
        $("#canDe").click(function () {
            $(".del").fadeOut();
            $("#mask").fadeOut();
        })
    </script>
</body>

</html>